<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style media="screen">
        div {
            outline: dashed lightblue;
        }

        canvas {
            border: 1px black solid;
        }

        .gua-inline-block {
            display: inline-block;
        }
    </style>
    <!--    guagame 相关文件-->
    <script src="guagame/gua_game.js"></script>
    <script src="guagame/gua_scene.js"></script>
    <script src="guagame/gua_image.js"></script>
    <script src="guagame/utils.js"></script>
    <script src="guagame/gua_vector.js"></script>
    <script src="guagame/gua_math.js"></script>
    <script src="guagame/gua_animation.js"></script>

    <script src="scene/main/zombie.js"></script>
    <script src="scene/main/peashooter.js"></script>
    <script src="scene/main/peabullet.js"></script>
    <script src="scene/main/plant_icon.js"></script>
    <script src="scene/main/snow_pea.js"></script>
    <script src="scene/main/potato_mine.js"></script>
    <script src="scene/main/puff_shroom.js"></script>
    <script src="scene/main/sun_flower.js"></script>
    <script src="scene/main/plant_card.js"></script>
    <script src="scene/main/sun.js"></script>
    <script src="scene/main/lawn_mower.js"></script>
    <script src="scene/main/bucket_head_zombie.js"></script>
    <script src="scene/main/flag_zombie.js"></script>
    <script src="scene/main/conehead_zombie.js"></script>
    <script src="scene/main/slogan.js"></script>
    <script src="scene/main/cherry.js"></script>
    <script src="scene/main/chomper.js"></script>
    <script src="scene/main/Garlic.js"></script>
    <script src="scene/main/gatlingpea.js"></script>
    <script src="scene/main/gloomshroom.js"></script>
    <script src="scene/main/hypnoshroom.js"></script>
    <script src="scene/main/iceshroom.js"></script>
    <script src="scene/main/jalapeno.js"></script>
    <script src="scene/main/lilypad.js"></script>
    <script src="scene/main/peabullet_ani.js"></script>
    <script src="scene/main/plantern.js"></script>
    <script src="scene/main/pumpkin.js"></script>
    <script src="scene/main/repeater.js"></script>
    <script src="scene/main/scaredyshroom.js"></script>
    <script src="scene/main/seashroom.js"></script>
    <script src="scene/main/shovel.js"></script>
    <script src="scene/main/spikeweed.js"></script>
    <script src="scene/main/splitpea.js"></script>
    <script src="scene/main/squash.js"></script>
    <script src="scene/main/sun_score.js"></script>
    <script src="scene/main/sunshroom.js"></script>
    <script src="scene/main/tallnut.js"></script>
    <script src="scene/main/threepeater.js"></script>
    <script src="scene/main/torchwood.js"></script>
    <script src="scene/main/twinsunflower.js"></script>
    <script src="scene/main/wallnut.js"></script>

<!--    title-->

    <script src="scene/title/scene_title.js"></script>
    <script src="scene/title/title_utils.js"></script>
    <script src="scene/title/scene_loose_end.js"></script>
    <script src="scene/title/scene_victory_end.js"></script>

    <script src="scene/import_img.js"></script>
<!--    editor-->
    <script src="scene/editor/scene_editor.js"></script>
<!--    menu-->
    <script src="scene/menu/level_config.js"></script>
    <script src="scene/menu/main_menu.js"></script>
    <script src="scene/menu/choose_level.js"></script>
    <script src="scene/menu/level.js"></script>

    <script src="config.js"></script>

</head>
<body>
<canvas id="id-canvas" width="1400" height="600"></canvas>
<hr>
<input id="id-input-speed" type="range" value="1">
<div id="gua-controls">
    <!--    <div class="">-->
    <!--        <label for="">-->
    <!--            <input class="gua-auto-slider" type="range" value=""-->
    <!--                   data-value="config.player_speed">-->

    <!--            玩家速度：<span class="gua-label"></span>-->
    <!--        </label>-->
    <!--    </div>-->
</div>


<script src="main.js"></script>
<script>
    let es = sel => document.querySelectorAll(sel)
    let e = sel => document.querySelector(sel)

    let bindAll = function (sel, eventNmae, callback) {
        let l = es(sel)
        for (let i = 0; i < l.length; i++) {
            let input = l[i]
            input.addEventListener(eventNmae, function (event) {
                callback(event)
            })
        }
    }
    let templateControl = function (key, item) {
        let min = item.min || 0
        let max = item.max || 100
        let t = `
            <div class="">
                <label>
                    <input class="gua-auto-slider" type="range"
                        min="${min}"
                        max="${max}"
                        value="${item.value}"
                        data-value="config.${key}"
                    >

                    ${item._comment}：<span class="gua-label"></span>
                </label>
            </div>
            `
        return t
    }
    let insertControls = function () {
        let div = document.getElementById('gua-controls')
        // let div = document.getElementsByClassName("controls")[0]
        log('div', div)

        let keys = Object.keys(config)
        for (let k of keys) {
            let item = config[k]
            let html = templateControl(k, item)
            div.insertAdjacentHTML('beforeend', html)
        }
    }
    const actions = {
        chang_active_tile(event) {
            let id = Number(event.target.dataset.id)
        },
    }

    let bindEvents = function () {
        bindAll('.gua-auto-slider', 'input', function (event) {
            let target = event.target
            let bindVar = target.dataset.value
            let v = target.value
            eval(bindVar + '.value =' + v)
            // config[bindVar] = v


            let label = target.closest('label').querySelector('.gua-label')
            label.innerText = v
        })

        //chang_active_tile
        e('body').addEventListener('click', event => {
            let action = event.target.dataset.action
            actions[action] && actions[action](event)
        })
    }
    let __maint = function () {
        //从成配置文件生成HTML 控件
        insertControls()
        //绑定事件
        bindEvents()

    }

    __maint()

</script>
</body>
</html>